<template>
	<view>
		<dcp-scroller :isLoading="isLoading" @refresh="refresh">
		<view class="page_height_box">
		<view class="top_nav_box">
			<navigation-custom :config="config" @customConduct="customConduct" />
		</view>
		<view class="page_item_bj"></view>
		<view class="page_content_box">
			<view :style="{height:statusHeight+'px'}"></view>
			<view class="invite_content_box">
				<view class="invite_content_item_box" v-for="(data,index) in list" :key="index">
					<view class="invite_content_item_left">
						<view class="invite_content_item_left_img">
							<image src="https://www.cccshansong.com/chong_weapp/invite_icon.png" mode=""></image>
						</view>
						<view class="invite_content_item_info">
							<view class="invite_content_item_info_top">
								<view class="invite_content_item_name">{{data.name}}</view>
								<view class="invite_content_item_status" v-if="data.status==0">待入驻</view>	
								<view class="invite_content_item_status invite_content_item_status1" v-if="data.status==1">已入驻</view>	
							</view>
							<view class="invite_content_item_info_bottom">
								<view class="invite_content_item_name1">骑手</view>
								<view class="invite_content_item_shu"></view>	
								<view class="invite_content_item_phone" v-if="data.mobile">{{data.mobile.slice(0,3)}}****{{data.mobile.slice(7,11)}}</view>	
							</view>
						</view>
					</view>
					<view class="invite_content_item_right">
						<view class="invite_content_item_title">佣金</view>
						<view class="invite_content_item_price">+¥{{data.price}}</view>	
					</view>
				</view>
				<view class="page_tip" v-if="list.length!=0">我是有底线的~</view>
				<view class="null_box" v-if="list.length==0" style="padding-top: 80rpx;" >
					<image src="../../static/images/png04.png" mode="" mode="widthFix"></image>
					<view class="null_tip">这里空空如也~</view>
				</view>
				<view  style="height:180rpx;"></view>	
			</view>
		</view>
		<view class="footer">
			<view hover-class="hover_class" class="creatbutton" @click="handleShare()">
				<!-- <button class="shareBtn"  open-type="share" >立即邀请</button> -->
				立即邀请
			</view>
		</view>
		</view>
		</dcp-scroller>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		components: {
			navigationCustom,
		},
		data() {
			return {
				isLoading:false,
				sweixin :'',
				user_id:0,
				count:0,
				list:[],					 
				page:1,
				statusHeight: 0,
				config: {
					title: "招募好友入驻", //title
					bgcolor: "transparent", //背景颜色
					fontcolor: "#fff", //文字颜色，默认白色
					type: 4, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: false, //是否将主页按钮显示为分享按钮
					menuIcon: "../../static/icon/back2.png", //当type为3或者4的时候左边的icon文件位置，注意位置与当前页面不一样
					// menuText:"返回", //当type为3或4的时候icon右边的文字
				},
			};
		},
		onLoad() {
			var a = this
			a.statusHeight =  uni.getSystemInfoSync().statusBarHeight  + 48
			a.getList()
			a.getUserInfo()
			
		},
		onPageScroll(res) {
			var a = this
			if (0 < res.scrollTop <= 60) {
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
			if (40 < res.scrollTop <= 120) {
				a.opacity = 1
				a.config.bgcolor = 'rgba(255,255,255,0.2)'
			}
			if (60 < res.scrollTop <= 220) {
				a.config.bgcolor = 'rgba(255,255,255,0.4 )'
			}
			if (res.scrollTop > 220) {
				a.config.bgcolor = 'rgba(255,255,255,1)'
			}
			if (res.scrollTop < 50) {
				a.opacity = 0
			}
			if (res.scrollTop == 0) {
				a.opacity = 0
				a.config.bgcolor = 'rgba(255,255,255,0)'
			}
		},
		onPullDownRefresh(){
			var a = this
			a.list = []
			a.page = 1
			a.getList()
		},
		onShareAppMessage(res) {
			var a = this;
			if (res.from === 'menu') {
				console.log(res.target);
			}
			return {
				title: '邀请您入驻冲冲冲跑腿',
				imageUrl: 'https://www.cccshansong.com/chong_weapp/share_img_new1.png',
				path: '/pages/user/register?parent_id=' + a.user_id
			};
		},
		methods: {
			refresh(){
				var a = this
				a.isLoading = true;
				setTimeout(()=>{
					a.list = []
					a.page = 1
					a.getList()
				},200)
			},
			handleShare1(){
				uni.showToast({
					title:'请去小程序端操作',
					icon:'none'
				})
			},
			handleShare(){
				uni.share({
				  provider: "weixin",
				  scene: "WXSceneSession",
				  type: 5,
				  imageUrl: 'https://www.cccshansong.com/chong_weapp/share_img_new1.png', //图片地址。type为0时，推荐使用小于20Kb的图片
				  title: '邀请您入驻冲冲冲跑腿', //分享内容的标题
				  miniProgram: {
				    id: "gh_088fa16acaff", //微信小程序原始id
				    path: '/pages/user/register?parent_id=' +  this.user_id,//点击链接进入的页面
				    type: 0,
				    webUrl: 'https://www.cccshansong.com/chong_weapp/website/index.html' //兼容低版本的网页链接
				  },
				  success: ret => {
				    console.log(JSON.stringify(ret));
				  },
				  fail(res) {
				    console.log(JSON.stringify(res))
				  }
				})
				
				
			},
			getUserInfo(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('user/info',{
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						if(res.data.code==200){
							a.user_id = res.data.data.id
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						} 
					}
				); 
			}, 
			customConduct() {
				uni.navigateBack({
					delta: 1
				})
			},
			getList(){
				var a =this
				uni.showLoading({
					title:'加载中'
				})
				a.globalajax('user/inviteList',{
						page:a.page,
						per_page:10,
					},'GET',function(res) {
						console.log(res);
						uni.hideLoading()
						uni.stopPullDownRefresh()
						a.isLoading = false
						if(res.data.code==200){
							a.list = a.list.concat(res.data.data)
						}else{
							a.$showModal({
								title:'友情提示',
								content:res.data.msg,
								showCancel:false,
								confirmText:'我知道了',
								success: (res) => {
								}
							}); 
						} 
					}
				); 
			}, 
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f8;
	}

	.footer {
		width: 100%;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		padding-bottom: calc(12rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		border-top: 2rpx solid #EBEEF5;

		.creatbutton {
			background-color: #418AFF;
			text-align: center;
			line-height: 80rpx;
			margin: 0 auto;
			width:688rpx;
			height: 80rpx;
			border-radius: 16rpx;
			color:#fff;
			font-size: 30rpx;
			border-radius: 12rpx;
			position: relative;
			.shareBtn{
				position: absolute;
				top: 0;
				left: 0;
				width:688rpx;
				height: 80rpx;
				opacity: 0;
			}
		}
	}

	.top_nav_box {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
	}

	.page_item_bj {
		width: 750rpx;
		height:664rpx;
		background-image: url('../../static/images/png03.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.page_content_box {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
		.invite_content_box{
			.invite_content_item_box{
				width: 702rpx;
				height: 148rpx;
				margin: 0 auto;
				margin-bottom: 20rpx;
				background-color: #fff;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				.invite_content_item_right{
					margin-right: 24rpx;
					display: flex;
					flex-direction: column;
					align-items: flex-end;
					.invite_content_item_title{
						color: rgba(48, 49, 51, 1);
						font-size: 24rpx;
						margin-top: 34rpx;
					} 
					.invite_content_item_price{
						color: rgba(255, 107, 0, 1);
						font-size: 32rpx;
						font-weight: bold;
						margin-top: 6rpx;
					}
				}
				.invite_content_item_left{
					display: flex;
					align-items: center;
					.invite_content_item_info{
						.invite_content_item_info_bottom{
							display: flex;
							align-items: center;
							.invite_content_item_name1{
								color: rgba(96, 98, 102, 1);
								font-size: 30rpx;
							}
							.invite_content_item_shu{
								background-color: rgba(179, 185, 195, 1);
								height: 20rpx;
								width: 2rpx;
								margin-left: 10rpx;
								margin-right: 10rpx;
							}
							.invite_content_item_phone{
								color: rgba(96, 98, 102, 1);
								font-size: 30rpx;
							}
						}
						.invite_content_item_info_top{
							display: flex;
							align-items: center;
							.invite_content_item_name{
								font-weight: bold;
								color: rgba(48, 49, 51, 1);
								font-size: 36rpx;
								margin-right: 24rpx;
							}
							.invite_content_item_status{
								width: 94rpx;
								height: 40rpx;
								text-align: center;
								line-height: 40rpx;
								background-color: rgba(251, 104, 56, 0.1);
								border-radius: 6rpx;
								font-size: 26rpx;
								color: rgba(251, 104, 56, 1);
							} 
							.invite_content_item_status1{
								background-color: rgba(0, 181, 112, 0.1);
								color: rgba(0, 181, 112, 1);
							}
						}
					}
					.invite_content_item_left_img{
						margin-left: 24rpx;
						margin-right: 16rpx;
						image{
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
						}
					}
				}
			}
		}
	}
</style>